<!-- 主页，保持原有的IP展示内容 -->
<template>
  <div class="w-full min-h-screen relative z-10 flex items-center">
    <div class="ml-[150px] md:ml-[50px] lg:ml-[150px] max-w-2xl">
      <h1 class="text-4xl lg:text-5xl mb-2 font-bold animate-fadeInUp animate-glow">
        <div class="text-2xl mb-4 text-white/80">∠・ω< )⌒☆</div>
        欢迎来到服务器的发布页
      </h1>
      
      <!-- IP 信息卡片 -->
      <div class="bg-black/20 backdrop-blur-md rounded-lg p-6 border border-white/10 animate-fadeInUp mt-8">
        <div v-if="loading" class="flex items-center justify-center py-8">
          <div class="animate-spin text-3xl">
            <Icon icon="mdi:loading" />
          </div>
        </div>
        
        <div v-else-if="error" class="text-red-400 py-8 text-center">
          <Icon icon="mdi:alert-circle" class="text-3xl mb-2" />
          <p>{{ error }}</p>
        </div>
        
        <div v-else>
          <!-- IPv4 地址列表 -->
          <div class="mb-6">
            <h2 class="text-xl font-semibold mb-4 flex items-center">
              <Icon icon="mdi:ip" class="mr-2" />
              IPv4 地址
            </h2>
            <div class="space-y-3">
              <div v-for="(ip, index) in ipData.ipv4" :key="index"
                   class="flex items-center justify-between bg-black/30 p-3 rounded-lg hover:bg-black/40 transition-all group">
                <code class="font-mono text-lg">{{ ip }}</code>
                <button @click="$emit('copy', ip)"
                        class="p-2 hover:bg-white/10 rounded-full opacity-0 group-hover:opacity-100 transition-all">
                  <Icon icon="mdi:content-copy" />
                </button>
              </div>
            </div>
          </div>
          
          <!-- IPv6 地址列表 -->
          <div>
            <h2 class="text-xl font-semibold mb-4 flex items-center">
              <Icon icon="mdi:ip-outline" class="mr-2" />
              IPv6 地址
            </h2>
            <div class="space-y-3">
              <div v-for="(ip, index) in ipData.ipv6" :key="index"
                   class="flex items-center justify-between bg-black/30 p-3 rounded-lg hover:bg-black/40 transition-all group">
                <code class="font-mono text-lg break-all">{{ ip }}</code>
                <button @click="$emit('copy', ip)"
                        class="p-2 hover:bg-white/10 rounded-full opacity-0 group-hover:opacity-100 transition-all shrink-0 ml-2">
                  <Icon icon="mdi:content-copy" />
                </button>
              </div>
            </div>
          </div>
          
          <!-- 更新时间 -->
          <div class="mt-6 text-sm text-white/60 flex items-center justify-end">
            <Icon icon="mdi:clock-outline" class="mr-1" />
            最后更新: {{ new Date(ipData.timestamp).toLocaleString() }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Icon } from '@iconify/vue'

defineProps({
  ipData: Object,
  loading: Boolean,
  error: [String, null]
})

defineEmits(['copy'])
</script> 
